<template>
	<div id="searchFlightPage">		
		<div class="main">
			<div class="swiper">
				<mt-swipe @change="handleChange">
					<mt-swipe-item><img src="./img/banner2.jpg" alt="" /></mt-swipe-item>
				</mt-swipe>
				<div class="kuai"></div>
			</div>			
			<div class="content">
				<div class="main">
					<div class="city">
						<div @click="toCity('dep')">{{city.depCity}}</div>
						<div @click="exchange" :class="{'rotateEx':isEx}" class="exchange"><span class="iconfont ex">&#xe603;</span></div>
						<div @click="toCity('arr')">{{city.arrCity}}</div>
					</div>
					<div class="date">
						<div>
							<div class="dateItem">
								<span class="iconfont">&#xe6bd;</span>
								<div class="dateBox"><span @click="toDate('dep')" class="riqi">{{depDate_}}</span><span class="week"></span></div>							
							</div>
							<div class="dateItem" v-show="isBack_">
								<span class="iconfont back">&#xe6eb;</span>
								<div class="dateBox"><span @click="toDate('arr')" class="riqi">{{arrDate_}}</span><span class="week"></span></div>								
							</div>
						</div>
						<div class="routeType">
							<mu-checkbox labelClass="wangfanText" v-model="isBack_" label="往返" labelLeft class="" />
						</div>
					</div>
					<div class="passenger">
						<div><span class="iconfont adultSign">&#xe696;</span><span class="adultText">成人</span></div>
						<div v-show="!isInland" class="counter">
							<div class="counterLeft" :class="{'unused':adultCount_==1}" @click="adultCount_--"><span class="iconfont">&#xe675;</span></div>
							<div class="count">{{adultCount_}}</div>
							<div class="counterRight" :class="{'unused':adultCount_==4}" @click="adultCount_++"><span class="iconfont">&#xe676;</span></div>
						</div>
						<div v-show="isInland">
							<mu-checkbox class="" disabled :value="true"/>
						</div>
					</div>
					<div class="cabinType">
						<div class="cabin">
							<div class="slide" :class="{'slideRight':!cabin}"></div>
							<div @click="handleCabinChange('Y')" :class="{'active':cabin}">经济舱</div>
							<div @click="handleCabinChange('F')" :class="{'active':!cabin}">头等舱/商务舱</div>
						</div>
					</div>
				</div>
				<div class="searchBtn">
					<mu-raised-button @click="search" fullWidth labelClass="searchLabel" label="搜索" class="search" />
					<p class='help' @click="help">查看帮助中心<span class="iconfont">&#xe602;</span></p>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<div class="main">
				<div class="hidden">
					<div class="order"></div>
				</div>
				<div class="explain">
					<div>
						<p class="servicePhone">客服电话: 4001355500</p>
						<p class="servicer">本服务由伊翔运达提供</p>
					</div>
				</div>
				<div class="order" @click="order">
					<div>
						<div class="icon"><span class="iconfont">&#xe6de;</span></div>
						<div><span class="text">订单</span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>